{{extend 'layout.html'}}

<style>
h3
{
    text-align: center;
    font-weight: bold;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function()
{ 
    jQuery(window).bind('resize', function()
    {
        jQuery("#grid").setGridWidth(jQuery('#content').width());
    }).trigger('resize');

    jQuery("#grid").jqGrid(
    {
        url:'{{=URL(r = request, f = 'call', args = ['json','getProjects', 'all'])}}',
        data: "{}",
        datatype: 'json',
        mtype: 'GET',
        contentType: "application/json; charset=utf-8",
        colNames:['Project Name','Short Description',"Open Todo's","Total Todo's"],
        colModel :[ 
          {name:'name', index:'name', width: 75}, 
          {name:'short_description', index:'short_description'}, 
          {name:"outstanding_todo", index:"outstanding_todo",width: 30, align: 'center'}, 
          {name:"total_todo", index:"total_todo",width: 30, align: 'center'}
        ],
        pager: '#pager',
        rowNum:25,
        rowList:[25,50,100],
        sortname: 'name',
        sortorder: 'asc',
        viewrecords: true,
        autowidth: true,
        height: "100%",
        rownumbers: true,
        caption: 'Projects'
    }); 

    jQuery("#grid").jqGrid('navGrid',
                           '#pager',
                           {edit: false,
                            add: false,
                            del: false,
                            search: false,
                            refresh: false}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "Add Project",
                            onClickButton: function()
                            {
                                window.location.href = "{{=URL(r = request, f = 'addproject')}}";
                            },
                            position: "first",
                            title: ""}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "Project Details",
                            onClickButton: function()
                            {
                                var row = jQuery("#grid").jqGrid('getGridParam', 'selrow');
                                if (null != row)
                                {
                                    window.location.href = '{{=URL(r = request, f = 'projectinfo')}}/' + row;
                                }
                                else
                                {
                                    alert('Please Select A Row.');
                                }
                            },
                            title: ""}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "View Todos",
                            onClickButton: function()
                            {
                                window.location.href = "{{=URL(r = request, f = 'todos')}}";
                            },
                            position: "last",
                            title: ""}
                  );
}); 
</script>

<h3>Projects</h3>
<p>
<table id="grid"></table> 
<div id="pager"></div>
